<template>

    <div class="meeting-room-management">
        <h2>操作日志</h2>
        <!--查询条件-->

        <!--数据展示-->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="operateNumber" label="操作编号" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="operatorName" label="操作人员 " />
            <el-table-column prop="belongingModule" label="所属模块" />
            <el-table-column prop="operationObject" label="操作对象" />
            <el-table-column prop="operationType" label="操作类型" />
        </el-table>
        <!--底部操作-->
        <div class="footer-bar">
            <div class="batch-actions">
                <label for="select-all-footer">选择全部</label>
                <button class="secondary-button">全部删除</button>
                <button class="secondary-button">反向选择</button>
                <button class="secondary-button">更多操作</button>
                <!--分页-->
                <Pagination :pageIndex="OperaterNlogNum.pageIndex" :pageSize="OperaterNlogNum.pageSize"
                    :count="pageNum.count" :pcount="pageNum.pcount" v-on:pagination="pageWay"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { GetUser, GetUserTittle, DelUserInfo, DelUserRangeInfo, UpdUserInfo } from '../../api/user'; // 导入API接口
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { GetOperatorNlog } from '../../api/Nlog';
import Pagination from '../../components/icons/Pagination.vue'
// 页面加载时执行
onMounted(async () => {
    OperaterNlogWay()
})
// 表格数据
const tableData = ref([{}])
//操作日志信息分页数据
const OperaterNlogNum = reactive({
    "pageIndex": 1,
    "pageSize": 10,
    "operatorName": "",
    "belongingModule": "",
    "operationType": "",
    "startTime": "",
    "endTime": ""
})
// 分页数据
const pageNum = ref({
    count: 0,
    pcount: 0
})
//向父组件传递分页数据
const pageWay = (pageIndex: number, pageSize: number) => {
    OperaterNlogNum.pageIndex = pageIndex;
    OperaterNlogNum.pageSize = pageSize;
    OperaterNlogWay()
}
// 获取操作日志信息
const OperaterNlogWay = async () => {
    const res = await GetOperatorNlog(OperaterNlogNum)
    //console.log(res.data)
    tableData.value = res.data.data.data
    pageNum.value.count = res.data.data.count
    pageNum.value.pcount = res.data.data.pcount
}

</script>

<style scoped>
.meeting-room-management {
    padding: 20px;
    font-family: 'Microsoft YaHei', sans-serif;
    color: #333;
    background-color: #f5f7fa;
    /* 模仿背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

h2 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
}

button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.primary-button {
    background-color: #409eff;
    color: white;
}

.primary-button:hover {
    background-color: #66b1ff;
}

.secondary-button {
    background-color: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
}

.secondary-button:hover {
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #c6e2ff;
}

.danger-button {
    background-color: #f56c6c;
    color: white;
}

.danger-button:hover {
    background-color: #f78989;
}

.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
}

.batch-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #606266;
}

.batch-actions input[type="checkbox"] {
    margin-right: 5px;
}
</style>
